<template>
  <div class="potentialCustomers">
    <page-header :title="'实习日志管理'"></page-header>
    <div class="search_area">
      <el-row>
        <el-form :form="queryForm" label-width="1rem">
          <el-col :span="6">
            <el-form-item label="岗位名称" v-if="user.permission != '2'">
              <el-input clearable type="text" v-model="queryForm.postName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学生名称" v-if="user.permission != '2'">
              <el-input clearable type="text" v-model="queryForm.userName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日志时间">
              <el-date-picker
                style="width: 100%"
                v-model="queryForm.submitDate"
                type="date"
                placeholder="选择日志时间"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="日志状态">
              <!-- <el-input type="text" v-model="queryForm.submitStatus"></el-input> -->
              <el-select v-model="queryForm.submitStatus" style="width: 100%;">
                <el-option label="已提交" value="01"></el-option>
                <el-option label="退回" value="02"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :span="user.permission != '2' ? 24 : 6">
          <div class="btn_area">
            <el-button class="confrim" @click="btnClick">查询</el-button>
            <el-button class="cancle" @click="reset">重置</el-button>
            <el-button class="confrim" @click="add" v-if="user.permission == '2'">新增</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <table-list :fields="fields" :list="list" :pagination="pagination" :total="total" @sizeChange="handleSizeChange" @currentChange="handleCurrentChange" @handle="onHandle"></table-list>
    <el-dialog title="实习日志填写" :visible.sync="visible" @close="close">
      <el-descriptions class="margin-top" :column="2" border v-if="visible" title="实习岗位信息" >
        <el-descriptions-item>
          <template slot="label">
            岗位名称
          </template>
          {{auditInfo.postName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习计划
          </template>
          {{auditInfo.projectHeading}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            指导教师
          </template>
          {{auditInfo.teacherName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习方式
          </template>
          {{auditInfo.internshipWayName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            发布日期
          </template>
          {{auditInfo.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            报名截止时间
          </template>
          {{auditInfo.applicationDeadline}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习开始日期
          </template>
          {{auditInfo.startDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习结束日期
          </template>
          {{auditInfo.endDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            岗位说明
          </template>
          {{auditInfo.postExplain}}
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 0.2rem;">
        <el-descriptions class="margin-top" :column="2" border v-if="visible" title="填写实习日志" ></el-descriptions>
        <el-row>
          <el-form :form="logForm" label-width="1rem">
            <el-col :span="11">
              <el-form-item label="日志时间" required>
                <el-date-picker
                  style="width: 100%"
                  v-model="logForm.createTime"
                  type="date"
                  placeholder="选择日志时间"
                  value-format="yyyy-MM-dd">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="11">
              <el-form-item label="日志标题" required>
                <el-input type="text" v-model="logForm.logTheme" placeholder="请填写日志标题"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
        <div style="border: 1px solid #ccc;margin-top: 0.2rem;">
          <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
          />
          <Editor
              style="height: 500px; overflow-y: hidden;"
              v-model="html"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="confrim" @click="tijiao">提交</el-button>
      </span>
    </el-dialog>
    <el-dialog title="实习日志详情" :visible.sync="visible2">
      <el-descriptions class="margin-top" :column="2" border v-if="visible2" title="实习岗位信息" >
        <el-descriptions-item>
          <template slot="label">
            岗位名称
          </template>
          {{auditInfo.postName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习计划
          </template>
          {{auditInfo.projectHeading}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            指导教师
          </template>
          {{auditInfo.teacherName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习方式
          </template>
          {{auditInfo.internshipWayName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            发布日期
          </template>
          {{auditInfo.createTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            报名截止时间
          </template>
          {{auditInfo.applicationDeadline}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习开始日期
          </template>
          {{auditInfo.startDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            实习结束日期
          </template>
          {{auditInfo.endDate}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            岗位说明
          </template>
          {{auditInfo.postExplain}}
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 0.2rem;">
        <el-descriptions class="margin-top" :column="2" border v-if="visible2" title="实习日志信息">
          <el-descriptions-item>
            <template slot="label">
              日志时间
            </template>
            {{logForm.createTime}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              日志标题
            </template>
            {{logForm.logTheme}}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              日志正文
            </template>
            <div v-html="logForm.sumUp"></div>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <span slot="footer" class="dialog-footer" v-if="user.permission != '2' && logForm.submitStatus == '01'">
        <el-button class="confrim" @click="tuihui">退回</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tableList from '@/components/table.vue'
import pageHeader from '@/components/pageHeader.vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
  name: 'potentialCustomers',
  components: {
    tableList,
    pageHeader,
    Editor, 
    Toolbar
  },
  data() {
    return {
      editor: null,
      html: '',
      timeList: [],
      toolbarConfig: {
        "toolbarKeys": [
          "headerSelect",
          "blockquote",
          "|",
          "bold",
          "underline",
          "italic",
          {
              "key": "group-more-style",
              "title": "更多",
              "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M204.8 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M505.6 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path><path d=\"M806.4 505.6m-76.8 0a76.8 76.8 0 1 0 153.6 0 76.8 76.8 0 1 0-153.6 0Z\"></path></svg>",
              "menuKeys": [
                  "through",
                  "code",
                  "sup",
                  "sub",
                  "clearStyle"
              ]
          },
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          {
            "key": "group-justify",
            "title": "对齐",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z\"></path></svg>",
            "menuKeys": [
                "justifyLeft",
                "justifyRight",
                "justifyCenter",
                "justifyJustify"
            ]
          },
          {
            "key": "group-indent",
            "title": "缩进",
            "iconSvg": "<svg viewBox=\"0 0 1024 1024\"><path d=\"M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z\"></path></svg>",
            "menuKeys": [
                "indent",
                "delIndent"
            ]
          },
          "emotion",
          "|",
          "insertLink",
          "insertTable",
          "codeBlock",
          "divider",
          "|",
          "undo",
          "redo",
          "|",
        ],
        "excludeKeys": [],
        "insertKeys": {
          "index": 0,
          "keys": []
        },
        "modalAppendToBody": false
      },
      editorConfig: { placeholder: '请输入内容...' },
      mode: 'default', // or 'simple',
      queryForm: {
        "postName": "",
        "submitDate": "",
        "submitStatus": "",
        "userName": ""
      },
      logForm: {},
      list: [
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        },
        {
          name: '小红',
          age: 16,
          sex: '男',
          grade: '一年级'
        }
      ],
      fields: [
        {
          prop: 'rowNum',
          label: '序号',
          align: 'center'
        },
        {
          prop: 'logTheme',
          label: '日志标题',
          align: 'center'
        },
        {
          prop: 'createTime',
          label: '日志时间',
          align: 'center'
        },
        {
          prop: 'submitStatusName',
          label: '日志状态',
          align: 'center'
        },
        {
          prop: 'projectHeading',
          label: '实习计划',
          align: 'center'
        },
        {
          prop: 'postName',
          label: '岗位名称',
          align: 'center'
        },
        {
          prop: 'teacherName',
          label: '指导老师',
          align: 'center'
        },
        {
          prop: 'studentName',
          label: '学生姓名',
          align: 'center'
        },
        {
          prop: 'className',
          label: '班级',
          align: 'center'
        },
        {
          prop: 'oper',
          label: '操作',
          align: 'center',
          btns: []
        }
      ],
      pagination: {
        currentPage: 1,
        pageSize: 10
      },
      total: 0,
      code: '',
      visible: false,
      auditInfo: null,
      user: {},
      visible2: false,
    }
  },
  methods: {
    add() {
      this.code = '1'
      if (this.auditInfo) {
        this.visible = true;
      } else {
        this.$message.info('您暂时没有报名成功的实习岗位！')
      }
    },
    onHandle(data) {
      let {row,type} = data;
      this.code = '2'
      this.queryAuditInfo(row.studentId)
      this.$post(this.$api.log.info,this.reqData(row.uuid)).then(res => {
        if (res.data.code === 200) {
          this.logForm = res.data.data;
          if (row.submitStatusName == '已提交' || this.user.permission != '2') {
            this.visible2 = true
          } else {
            this.visible = true
            this.html = this.logForm.sumUp
          }
        } else {
          this.$message.error(res.data.message)
        }
      })
      
      console.log(data,type);
    },
    tuihui() {
      let url = this.$api.log.return;
      this.$post(url,this.reqData(this.logForm.uuid)).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message)
          this.visible2 = false
          this.queryLogList();
        } else {
          this.$message.error(res.data.messgae)
        }
      })
    },
    tijiao() {
      let url = this.code == '1' ? this.$api.log.create : this.$api.log.update;
      console.log(url,this.code);
      let obj = {}
      if (this.code == '1') {
        obj = {
          createTime: this.logForm.createTime,
          logTheme: this.logForm.logTheme,
          postId: this.auditInfo.uuid,
          studentId: this.user.uuid,
          sumUp: this.editor.getHtml(),
        }
      } else {
        obj = this.logForm
        obj.sumUp = this.editor.getHtml()
      }
      this.$post(url,this.reqData(obj)).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message);
          this.visible = false;
          this.editor.clear();
          this.queryLogList()
        } else {
          this.$message.error(res.data.message);
        }
      })
      console.log(obj);
    },
    close() {
      this.editor.clear();
      this.logForm = {};
    },
    reset() {
      this.queryForm = {
        "postName": "",
        "submitDate": "",
        "submitStatus": "",
        "userName": ""
      }
      this.queryLogList();
    },
    btnClick() {
      this.queryLogList();
    },
    queryLogList() {
      let url = this.$api.log.list;
      this.queryForm.adminId = this.user.uuid;
      this.queryForm.permission = this.user.permission
      this.$post(url,this.reqData(this.queryForm,this.pagination.currentPage,this.pagination.pageSize)).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data
          this.list = data.list;
          this.list.forEach((item,index) => {
            item.rowNum = (this.pagination.currentPage - 1) * this.pagination.pageSize + index + 1
          })
          this.total = data.total;
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    handleSizeChange(val) {
      console.log(val);
      this.pagination.pageSize = val;
      this.queryLogList();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pagination.currentPage = val;
      this.queryLogList();
    },
    onCreated(editor) {
      console.log(editor);
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    getHtml() {
      const text = this.editor.getHtml()
      console.log(text);
      console.log(toolbar.getConfig());
    },
    queryAuditInfo(uuid) {
      this.$post(this.$api.audit.info,this.reqData(uuid)).then(res => {
        if (res.data.code === 200) {
          this.auditInfo = res.data.data ? res.data.data : {}
          console.log(this.auditInfo);
        }
      })
    },
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem('user'))
    if (this.user.permission == '2') {
      this.fields[this.fields.length - 1].btns.push({type: 'update',desc:'编辑'})
    } else {
      this.fields[this.fields.length - 1].btns.push({type: 'info',desc:'查看详情'})
    }
    this.queryLogList();
    if (this.user.permission == '2') {
      this.queryAuditInfo(this.user.uuid)
    }
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>
<style scoped>
.potentialCustomers {
  background: #fff;
  overflow: hidden;
  padding-bottom: 0.15rem;
}
</style>
<style src="@wangeditor/editor/dist/css/style.css"></style>